/**
 * Created by zzy on 2017/9/10.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    ScrollView,
    Image,
    Linking,
    Alert,
    DeviceEventEmitter
} from 'react-native';
import {observer} from "mobx-react";
import {observable} from 'mobx'
import Ionicons from 'react-native-vector-icons/Ionicons'
import {VerticalButton, VerticalTextButton} from '../componentluo/verticalbutton'
import Constant from '../../js/Contant'
import ItemCell from '../../js/component/ItemCell'
import RequestUtil from "../util/NetRequest";
import meInfoStore from '../store/MeInfoStore'

@observer
export default class MeLuo extends Component{
    static navigationOptions = {
        title: '我',
        headerTitleStyle:{alignSelf:'center'},
        headerStyle: {
            backgroundColor:'#fff'
        }
    };
    render(){
        return <ScrollView style={[styles.flex,{backgroundColor:Constant.GRAYBGCOLOR}]}>
                <MeHeader
                    onClick={()=>{
                        this.props.navigation.navigate('PersonInfo',{userInfo:meInfoStore.userInfo});
                    }}/>
            {/*<View style={[{flexDirection: 'row',marginBottom:20,paddingVertical:10,backgroundColor:'white'}, styles.borderBottom]}>*/}
                {/*<VerticalTextButton title={meInfoStore.userWaterTicketCount} subtitle="水票" style={{flexGrow: 1, height: 50, backgroundColor: '#fff'}} onPress={()=>{this.props.navigation.navigate('MyTiketsLuo')}}/>*/}
                {/*<VerticalTextButton title="0" subtitle="代金券" style={{flexGrow: 1, height: 50, backgroundColor: '#fff'}} onPress={()=>{}}/>*/}
                {/*<VerticalTextButton title="0" subtitle="喜币" style={{flexGrow: 1, height: 50, backgroundColor: '#fff'}} onPress={()=>{}}/>*/}
            {/*</View>*/}
            <View style={[{backgroundColor: '#fff',paddingVertical:10,marginBottom:20},styles.borderBottom]}>
                <TouchableOpacity style={[{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    backgroundColor: '#fff',
                }, styles.borderBottom]}
                                  onPress={()=>{
                                      this.props.navigation.navigate('Order',{index:0});
                                  }}>
                    <View style={{flexDirection: 'row', alignItems: 'center', marginLeft: 10,paddingVertical:10}}>
                        <Image source={require('../../luoasserts/me/me_icon_order.png')} style={{width:18,height:24,resizeMode:'contain'}}/>
                        <Text style={{paddingHorizontal: 10, color: Constant.TEXTTITLECOLOR, fontWeight: '200'}}>我的订单</Text>
                    </View>
                    <View style={{flexDirection: 'row', alignItems: 'center', marginRight: 10}}>
                    <Text style={{paddingHorizontal: 10, color: Constant.TEXTCONTENTCOLOR, fontWeight: '400'}}>查看全部</Text>
                    <Ionicons name="ios-arrow-forward-outline" size={28} color={Constant.TEXTTIPCOLOR}/>
                    </View>
                </TouchableOpacity>
                <View style={{flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center',paddingTop:10}}>
                    {/*<VerticalButton title="全部" icon={require('../../luoasserts/me/me_order_pending_evaluation.png')} iconStyle={{width:22,height:18}} style={{flexGrow: 1, height: 50, backgroundColor: '#fff'}} index={0} />*/}
                    <VerticalButton title="待付款" icon={require('../../luoasserts/me/me_order_pending-payment.png')} iconStyle={{width:20,height:20,resizeMode:'contain'}} style={{flexGrow: 1, height: 50, backgroundColor: '#fff'}} index={1} onPress={()=>{this.props.navigation.navigate('Order',{index:1})}}/>
                    <VerticalButton title="待收货" icon={require('../../luoasserts/me/me_order_pending_receive.png')} iconStyle={{width:20,height:20,resizeMode:'contain'}} style={{flexGrow: 1, height: 50, backgroundColor: '#fff'}} index={2} onPress={()=>{this.props.navigation.navigate('Order',{index:2})}}/>
                    <VerticalButton title="待评价" icon={require('../../luoasserts/me/me_order_pending_evaluation.png')} iconStyle={{width:20,height:20,resizeMode:'contain'}} style={{flexGrow: 1, height: 50, backgroundColor: '#fff'}} index={3} onPress={()=>{this.props.navigation.navigate('Order',{index:3})}}/>
                    {/*<VerticalButton title="退换" icon={require('../../assets/me/me_order_return-goods.png')} iconStyle={{width:20,height:20}} style={{flexGrow: 1, height: 50, backgroundColor: '#fff'}} index={4} onPress={this._goToOrder.bind(this)}/>*/}
                </View>
            </View>
            <View>
                <View style={{paddingLeft: 10, backgroundColor: '#fff'}}>
                    <ItemCell icon={require('../../luoasserts/me/me_icon_ticket.png')} iconStyle={{width:20,height:20}} name="我的水票" callback={() => {
                        this.props.navigation.navigate('MyTiketsLuo');
                    }}/>
                </View>

                <View style={{paddingLeft: 10, backgroundColor: '#fff',marginTop:20}}>
                    <ItemCell icon={require('../../luoasserts/me/me_icon_collection.png')} iconStyle={{width:20,height:18}} name="我的收藏" desc="" callback={() => {
                        this.props.navigation.navigate('Collection');
                    }}/>
                </View>
                <View style={{paddingLeft: 10, backgroundColor: '#fff'}}>
                    <ItemCell icon={require('../../luoasserts/me/me_icon_setup.png')} iconStyle={{width:20,height:20}} name="地址管理" callback={() => {
                        this.props.navigation.navigate('AddressList');
                    }}/>
                </View>
            </View>
            <View>
                <View style={{paddingLeft: 10, backgroundColor: '#fff',marginTop:20}}>
                    <ItemCell icon={require('../../luoasserts/me/me_icon_shop.png')} iconStyle={{width:20,height:20}} name="我要开店" callback={() => {
                        this.props.navigation.navigate('IWantOpenShop');
                    }}/>
                </View>
                <View style={{paddingLeft: 10, backgroundColor: '#fff'}}>
                    <ItemCell icon={require('../../luoasserts/me/me_icon_setup.png')} iconStyle={{width:20,height:20}} name="设置" callback={() => {
                        this.props.navigation.navigate('Setting');
                    }}/>
                </View>
                <View style={{paddingLeft: 10, backgroundColor: '#fff'}}>
                    <ItemCell icon={require('../../luoasserts/me/me_icon_service.png')} iconStyle={{width:20,height:22}} name="客服" callback={()=>{
                        Alert.alert(
                            '400-061-3229',
                            '',
                            [
                                {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                                {text: '呼叫', onPress: () => {
                                    Linking.openURL('tel:'+Constant.SERVICEPHONE) ;
                                }},
                            ],
                            { cancelable: false }
                        )
                    }}/>
                </View>
            </View>
        </ScrollView>
    }
    componentWillMount() {
    }
    componentDidMount() {
        this.loginout = DeviceEventEmitter.addListener(Constant.LOGINOUT,this.logOut.bind(this));
        this.loginin = DeviceEventEmitter.addListener(Constant.LOGINOK,this.getMe.bind(this));
        this.payComplete = DeviceEventEmitter.addListener('payComplete',this.getMe.bind(this));
        this.getMe();
    }
    componentWillUnmount(){
        this.loginout.remove();
        this.loginin.remove();
        this.payComplete.remove();
    };
    logOut(){
        var userInfo={
            phoneNum:'',
            userName:'游客',
            userIconUrl:'',
            userWaterTicketCount:0,
            huibeiCode:''
        };
        meInfoStore.setUserInfo(userInfo);
    }
    getMe(){
        var param={};
        RequestUtil.me(param).then((data)=>{
            LOG('我的信息----------'+JSON.stringify(data));
            meInfoStore.setUserInfo(data);
        }).catch(err=>{
            this.props.navigation.navigate('Login');
        })
    }
}

const MeHeader =observer (({onClick})=>{
    var icon=meInfoStore.userIconUrl==''?require('../../luoasserts/me/me_icon.png'):{uri:meInfoStore.userIconUrl};
    return (<TouchableOpacity
        activeOpacity={1}
        onPress={onClick}
        style={[{
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: '#fff',
            justifyContent: 'space-between',
            paddingVertical:10
        },styles.borderBottom]}>
        <View style={{flexDirection: 'row'}}>
            <Image style={{width: 64, height: 64, marginLeft: 10,borderRadius:4}}
                   source={icon}/>
            <View style={{justifyContent: 'center', marginLeft: 10}}>
                <Text style={{color: Constant.TEXT_COLOR_3, fontWeight: '400'}}>{meInfoStore.userName}</Text>
                <Text style={{color: 'gray', fontWeight: '100', fontSize: 13,marginTop:5}}>汇贝号:{meInfoStore.huibeiCode}</Text>
            </View>
        </View>
        <View style={{justifyContent: 'center', marginRight: 15}}>
            <Ionicons name="ios-arrow-forward-outline" size={28} color="#cccccc"/>
        </View>
    </TouchableOpacity>)
})
const styles =  {
    center:{
        justifyContent:'center',
        alignItems:'center'
    },
    flex:{
        flex:1
    },
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
}